<template>
  <div class="vol-tabs">
    <el-tabs
      type="border-card"
      style="
        min-height: 370px;
        box-shadow: none;
        border-bottom: 0;
        border-top: 10px solid #eee;
      "
    >
      <el-tab-pane>
        <template #label>
          <span><i class="el-icon-date"></i> 原料信息</span>
        </template>
        <!-- 显示操作按钮 -->
        <div>
          <el-button
            type="success"
            size="mini"
            ghost
            @click="add"
          ><i class="el-icon-plus"></i>添加行</el-button>
          <el-button
            type="primary"
            size="mini"
            ghost
            @click="del"
          ><i class="el-icon-close"></i> 删除行</el-button>
        </div>
        <el-alert
          title="双击行可以编辑"
          type="warning"
          style="margin: 10px 0"
          show-icon
        >
        </el-alert>
        <mes-table
          ref="table1"
          :clickEdit="true"
          :loadKey="true"
          :columns="tableColumns1"
          :pagination-hide="false"
          :height="230"
          :url="table1Url"
          :index="true"
          :defaultLoadPage="false"
          @loadBefore="loadTableBefore1"
          @loadAfter="loadTableAfter1"
        ></mes-table>
      </el-tab-pane>

      <el-tab-pane :lazy="false">
        <template #label>
          <span><i class="el-icon-date"></i> 库存信息</span>
        </template>
        <div style="padding-bottom: 10px">
          <el-button
            type="success"
            size="mini"
            ghost
            @click="add2"
          ><i class="el-icon-plus"></i> 添加行</el-button>
          <el-button
            type="primary"
            size="mini"
            ghost
            @click="del2"
          ><i class="el-icon-close"></i> 删除行</el-button>
        </div>
        <el-alert
          title="双击行可以编辑"
          type="warning"
          style="margin-bottom: 10px;"
          show-icon
        >
        </el-alert>
        <mes-table
          ref="table2"
          :loadKey="true"
          :clickEdit="true"
          :columns="tableColumns2"
          :pagination-hide="false"
          :height="275"
          :url="table2Url"
          :defaultLoadPage="false"
          @loadBefore="loadTableBefore2"
          :index="true"
        ></mes-table>
      </el-tab-pane>
    </el-tabs>
  </div>
  <modelHeader ref="modelHeader"/>
  <modelFooter ref="modelFooter"/>
</template>

<script>
import MesTable from "@/components/basic/MesTable.vue";
import modelHeader from "./RawManagementModelHeader.vue";
import modelFooter from "./RawManagementModelFooter.vue";

export default {
  components: { MesTable, modelHeader, modelFooter },
  data() {
    return {
      table1Url: "api/Raw/getRawData",
      tableColumns1: [
        { field: "RawmanagementId", title: "主键ID", type: "int", width: 80, hidden: true },
        {
          field: "RawmanagementBh",
          title: "原料编号",
          type: "string",
          width: 150,
          require: true,
          sortable: true,
        },
        {
          field: "RawmanagementName",
          title: "原料名称",
          type: "string",
          width: 200,
          require: true,
          sortable: true,
        },
        {
          field: "FlName",
          title: "分类",
          type: "string",
          width: 150,
          require: true,
          bind: { key: "FlNamee", data: [] },
        },
        {
          field: "XinghaoName",
          title: "型号",
          type: "string",
          width: 150,
          require: true,
          bind: { key: "XinghaoNamee", data: [] },
        }
      ],
      table2Url: "api/Raw/getStockData",
      tableColumns2: [
        { field: "StockId", title: "库存ID", type: "int", width: 80, hidden: true },
        {
          field: "RawmanagementKCNum",
          title: "库存数量",
          type: "number",
          width: 120,
          require: true,
          edit: { type: "number" },
        },
        {
          field: "RawmanagementSx",
          title: "库存上限",
          type: "number",
          width: 120,
          require: true,
          edit: { type: "number" },
        },
        {
          field: "RawmanagementXx",
          title: "库存下限",
          type: "number",
          width: 120,
          require: true,
          edit: { type: "number" },
        },
        {
          field: "RawmanagementWZ",
          title: "存放位置",
          type: "string",
          width: 200,
          edit: { type: "text" },
        }
      ],
    };
  },
  methods: {
    modelOpen() {
      let $parent;
      this.$emit("parentCall", ($this) => {
        $parent = $this;
      });
      if ($parent.currentAction == "Add") {
        this.$refs.table1.reset();
        this.$refs.table2.reset();
      } else {
        this.$refs.table1.load();
        this.$refs.table2.load();
      }
    },
    loadTableBefore1(param, callBack) {
      let $parent = null;
      this.$emit("parentCall", ($this) => {
        $parent = $this;
      });
      if ($parent.currentAction == "Add") {
        return callBack(false);
      }
      let RawmanagementId = $parent.currentRow.RawmanagementId;
      param.wheres.push({ name: "RawmanagementId", value: RawmanagementId });
      callBack(true);
    },
    loadTableBefore2(param, callBack) {
      let $parent = null;
      this.$emit("parentCall", ($this) => {
        $parent = $this;
      });
      if ($parent.currentAction == "Add") {
        return callBack(false);
      }
      let RawmanagementId = $parent.currentRow.RawmanagementId;
      param.wheres.push({ name: "RawmanagementId", value: RawmanagementId });
      callBack(true);
    },
    loadTableAfter1(data, callBack) {
      return true;
    },
    del() {
      let rows = this.$refs.table1.getSelected();
      if (rows.length == 0) {
        return this.$Message.error("请先选中行");
      }
      this.$refs.table1.delRow();
      var param = [rows[0].RawmanagementId];
      this.http.post('/api/Raw/delRaw', param, true).then((result) => {
        this.$Message.info("删除成功！");
      });
    },
    del2() {
      let rows = this.$refs.table2.getSelected();
      if (rows.length == 0) {
        return this.$Message.error("请先选中行");
      }
      this.$refs.table2.delRow();
      var param = [rows[0].StockId];
      this.http.post('/api/Raw/delStock', param, true).then((result) => {
        this.$Message.info("删除成功！");
      });
    },
    add() {
      this.$refs.modelHeader.open();
    },
    add2() {
      this.$refs.modelFooter.open();
    },
    setTable1Rows(modelType, _rows) {
      this.$refs.table1.rowData.unshift(..._rows);
    },
    setTable2Rows(_rows) {
      this.$refs.table2.rowData.unshift(..._rows);
    }
  },
};
</script>

<style lang="less" scoped>
.vol-tabs {
  background: white;
}
</style> 